<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>


<div class="layui-row">
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">虫害一览</div>
            <div class="layui-card-body">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>

    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">
            <form action="addPest.html" method="post">
                <input type="submit" class="layui-btn" id="addBtn" value="添加新虫害">
            </form>

        </div>
    </div>

</div>
<div class="layui-row">
    <div class="layui-col-xs6">
        <div class="grid-demo">
            <div class="layui-form-item">
                <label class="layui-form-label">害虫名</label>
                <div class="layui-input-block">
                    <input id="qpName" type="text" name="f_pestName" required  lay-verify="required" placeholder="请输入害虫名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">宿主</label>
                <div class="layui-input-block">
                    <input id="qpHost" type="text" name="f_host" required  lay-verify="required" placeholder="请输入害虫宿主" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" id="queryBtn">查询</button>
        </div>
    </div>

</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



</body>
<script src="../layui/layui.all.js"></script>
<script>
    layui.use(['table','jquery','layer'],function () {
        var table = layui.table;
        var $=layui.$;
        //第一个实例
        t=table.render({
            elem: '#demo',
            // height: 400,
            url: '/pestSystem/pest.do' //数据接口
            ,
            page: true //开启分页
            ,
            request:{
                pageName:"pageNo",
                limitName:"pageSize"
            }
            ,
            cols: [
                [ //表头
                    {
                    field: 'f_pestName',
                    title: '名称',
                    width: 150,
                    // edit: true
                }, {
                    field: 'f_host',
                    title: '寄主',
                    width: 150,
                    // sort: true
                }, {
                    field: 'f_detriment',
                    title: '主要危害',
                    // width: 80
                },{
                    field:'right',
                    toolbar:'#barDemo'
                }
                ]
            ]
        });


        $("#queryBtn").on("click",function () {
            t.reload({
                where:{
                    f_pestName:$("#qpName").val(),
                    f_host:$("#qpHost").val()
                },
                page:{
                    curr:1
                }
            });
        });
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                layer.open({
                    type: 2 //此处以iframe举例
                    ,content:"/pestSystem/home/pestDetail.html"
                    ,title: '害虫详情'
                    ,area: ['400px', '400px']
                    ,shade:[0.8, '#393D49']

                    ,anim:4
                    ,maxmin: true
                    ,btn: ['确定', '关闭'] //只是为了演示
                    ,yes: function(index,layero){
                        let body = layer.getChildFrame('body',index);
                        console.log(body);
                        let pestName = body.find("input[name=f_pestName]").val();
                        console.log(pestName);
                        layer.close();
                    }
                    ,btn2: function(){
                        layer.msg("bbb");
                        layer.close();
                        return false;
                    }
                    ,success:function(layero,index){
                        let body = layer.getChildFrame('body',index);
                        body.find("input[name=pkid]").val(data.pkid);
                        body.find("input[name=f_pestName]").val(data.f_pestName);
                        body.find("input[name=f_host]").val(data.f_host);
                        body.find("textarea[name=f_detriment]").val(data.f_detriment);
                    }
                })
            }
            else if(layEvent === 'del'){ //删除
                layer.confirm('真的要删除吗', function(index){
                    // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    // layer.close(index);
                    // //向服务端发送删除指令
                    $.ajax({
                        type:"get",
                        url:"/testAjax/test?method=delete&deleteId="+data.pk_id,
                        success:function (data) {
                            if(data=="true"){
                                layer.msg("删除成功");
                                obj.del();
                            }else{
                                layer.msg("删除失败");
                            }

                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                layer.msg("你点击了编辑");
            }
        });
    });
</script>

</html>